<script>
  import dayjs from 'dayjs';
  import TimeListDetail from './components/timeListDetail.vue';
  import MarkLists from './components/marklists.vue';
  import sheep from '@/sheep';

  export default {
    name: 'oldYellowCalendar',
    components: { MarkLists, TimeListDetail },
    data() {
      return {
        oldYellowCalendarInfo: {
          list: [],
        },
      };
    },
    props: {
      pageHeight: {
        type: String,
        default: '0px',
      },
    },
    computed: {
      IMG_URL() {
        return sheep.$store('AI').sq_image_path;
      },
      currentTimeDay() {
        return dayjs(new Date().getTime()).format('DD');
      },
      currentTime() {
        let week = dayjs(new Date().getTime()).day();
        switch (week) {
          case 1:
            return `${dayjs(new Date().getTime()).format('YYYY年MM月DD日')} 星期一`;
          case 2:
            return `${dayjs(new Date().getTime()).format('YYYY年MM月DD日')} 星期二`;
          case 3:
            return `${dayjs(new Date().getTime()).format('YYYY年MM月DD日')} 星期三`;
          case 4:
            return `${dayjs(new Date().getTime()).format('YYYY年MM月DD日')} 星期四`;
          case 5:
            return `${dayjs(new Date().getTime()).format('YYYY年MM月DD日')} 星期五`;
          case 6:
            return `${dayjs(new Date().getTime()).format('YYYY年MM月DD日')} 星期六`;
          case 0:
            return `${dayjs(new Date().getTime()).format('YYYY年MM月DD日')} 星期日`;
        }
      },
    },
    async created() {
      this.$nextTick(async () => {
        let { data } = await sheep.$api.surname.getStuffInfo();
        this.oldYellowCalendarInfo = data;
        this.oldYellowCalendarInfo.list = [
          { ...this.oldYellowCalendarInfo.jishi.zi, name: '子时' },
          { ...this.oldYellowCalendarInfo.jishi.chou, name: '丑时' },
          { ...this.oldYellowCalendarInfo.jishi.yin, name: '寅时' },
          { ...this.oldYellowCalendarInfo.jishi.mao, name: '卯时' },
          { ...this.oldYellowCalendarInfo.jishi.cheng, name: '辰时' },
          { ...this.oldYellowCalendarInfo.jishi.si, name: '巳时' },
          { ...this.oldYellowCalendarInfo.jishi.wu, name: '午时' },
          { ...this.oldYellowCalendarInfo.jishi.wei, name: '未时' },
          { ...this.oldYellowCalendarInfo.jishi.shen, name: '申时' },
          { ...this.oldYellowCalendarInfo.jishi.you, name: '酉时' },
          { ...this.oldYellowCalendarInfo.jishi.xu, name: '戌时' },
          { ...this.oldYellowCalendarInfo.jishi.hai, name: '亥时' },
        ];
        console.log(this.oldYellowCalendarInfo);
        this.$forceUpdate();
      });
    },
    methods: {
      dayjs,
    },
  };
</script>

<template>
  <scroll-view :scroll-y="true" class="wh_750" :style="{
    height: `calc(100vh - ${pageHeight})`
  }">
    <view class="oldYellowCalendar flex flex-column align-center">
      <view class="oldYellowCalendar_time relative">
        <text class="oldYellowCalendar_time_text">
          {{ currentTimeDay || '' }}
        </text>
        <view v-if="!!oldYellowCalendarInfo.content && !!oldYellowCalendarInfo.content.jieri"
              style="width: 112rpx;height: 60rpx;background: #FF4206;border-radius: 0rpx 30rpx 30rpx 30rpx;position: absolute;bottom: 56rpx;right: -120rpx;font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 36rpx;color: #FFFFFF;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
          {{ oldYellowCalendarInfo.content.jieri || '' }}
        </view>
      </view>
      <view class="oldYellowCalendar_header flex align-center justify-center mt_20">
        <image class="oldYellowCalendar_header_left" :src="`${IMG_URL}/chineseSurname/cornerMark.png`"></image>
        <text class="oldYellowCalendar_header_text"
              v-if="!!oldYellowCalendarInfo.content && !!oldYellowCalendarInfo.content.nongli">
          {{ currentTime }} {{ oldYellowCalendarInfo.content.nongli || '' }}
        </text>
        <image class="oldYellowCalendar_header_right" :src="`${IMG_URL}/chineseSurname/cornerMark.png`"></image>
      </view>
      <view style="position: relative" class="wh_726 flex flex-column align-center">
        <view class="hW_40"></view>
        <view class="oldYellowCalendar_allTitle flex flex-column align-center justify-center">
          <image class="oldYellowCalendar_allTitle_image"
                 :src="`${IMG_URL}/chineseSurname/jiapu_background_bg.png`"></image>
          今日
        </view>
        <view class="hW_40"></view>
        <TimeListDetail>
          <template v-slot:content>
            <view class="hW_20"></view>
            <view class="timeListDetail_listLabel flex flex-row align-center">
              <view class="timeListDetail_listLabel_line"></view>
              <text class="timeListDetail_listLabel_text ml_12">今日宜忌</text>
            </view>
            <view class="hW_40"></view>
            <view class="timeListDetail_content flex align-center" style="align-items: flex-start">
              <MarkLists title="宜"></MarkLists>
              <view class="timeListDetail_content_text ml_15"
                    v-if="!!oldYellowCalendarInfo.content && !!oldYellowCalendarInfo.content.yi">
                {{
                  oldYellowCalendarInfo.content.yi || ''
                }}
              </view>
            </view>
            <view class="hW_40"></view>
            <view class="timeListDetail_content mt_20 flex align-center" style="align-items: flex-start">
              <MarkLists title="忌"></MarkLists>
              <text class="timeListDetail_content_text ml_15"
                    v-if="!!oldYellowCalendarInfo.content && !!oldYellowCalendarInfo.content.ji">
                {{
                  oldYellowCalendarInfo.content.ji || ''
                }}
              </text>
            </view>
            <view class="hW_22"></view>
            <view class="timeListDetail_line"></view>
            <view class="hW_40"></view>
            <view class="timeListDetail_listLabel flex align-center">
              <view class="timeListDetail_listLabel_line"></view>
              <text class="timeListDetail_listLabel_text ml_12">今日神位</text>
            </view>
            <view class="hW_40"></view>
            <view class="timeListDetail_description">
              <text class="timeListDetail_description_text"
                    v-if="!!oldYellowCalendarInfo.content && !!oldYellowCalendarInfo.content.zhiri">
                值日: {{
                  oldYellowCalendarInfo.content.zhiri || ''
                }}
              </text>
            </view>
            <view class="hW_30"></view>
            <view class="timeListDetail_description">
              <text class="timeListDetail_description_text"
                    v-if="!!oldYellowCalendarInfo.content && !!oldYellowCalendarInfo.content.zhishen">
                值神: {{
                  oldYellowCalendarInfo.content.zhishen
                }}
              </text>
            </view>
            <view class="hW_30"></view>
            <view class="timeListDetail_description">
              <text class="timeListDetail_description_text"
                    v-if="!!oldYellowCalendarInfo.content && !!oldYellowCalendarInfo.content.tszf">
                胎神占方: {{
                  oldYellowCalendarInfo.content.tszf || ''
                }}
              </text>
            </view>
            <view class="hW_40"></view>
            <view class="timeListDetail_line"></view>
            <view class="hW_20"></view>
            <view class="timeListDetail_tabulation flex flex-column align-center">
              <view class="timeListDetail_tabulation_title flex align-center justify-center"
                    v-if="!!oldYellowCalendarInfo.content && !!oldYellowCalendarInfo.content.shengxiao">
                {{ oldYellowCalendarInfo.content.shengxiao }}
              </view>
              <view class="timeListDetail_tabulation_content">
                生肖
              </view>
            </view>
            <view class="timeListDetail_description column">
              <text class="timeListDetail_description_text"
                    v-if="!!oldYellowCalendarInfo.content && !!oldYellowCalendarInfo.content.dizhi">
                地支:{{
                  oldYellowCalendarInfo.content.dizhi || ''
                }}
              </text>
              <text class="timeListDetail_description_text"
                    v-if="!!oldYellowCalendarInfo.content && !!oldYellowCalendarInfo.content.chongsha">
                冲煞:{{
                  oldYellowCalendarInfo.content.chongsha || ''
                }}
              </text>
              <text class="timeListDetail_description_text"
                    v-if="!!oldYellowCalendarInfo.content && !!oldYellowCalendarInfo.content.ganzhi">
                干支:{{
                  oldYellowCalendarInfo.content.ganzhi || ''
                }}
              </text>
            </view>
            <view class="hW_20"></view>
            <view class="timeListDetail_line"></view>
            <view class="hW_40"></view>
            <view class="timeListDetail_listLabel flex align-center">
              <view class="timeListDetail_listLabel_line"></view>
              <text class="timeListDetail_listLabel_text ml_12">今日趋忌</text>
            </view>
            <view class="hW_40"></view>
            <view class="timeListDetail_description">
              <text class="timeListDetail_description_text"
                    v-if="!!oldYellowCalendarInfo.content && !!oldYellowCalendarInfo.content.jsyq">
                吉神宜趋:{{
                  oldYellowCalendarInfo.content.jsyq || ''
                }}
              </text>
            </view>
            <view class="hW_30"></view>
            <view class="timeListDetail_description">
              <text class="timeListDetail_description_text"
                    v-if="!!oldYellowCalendarInfo.content && !!oldYellowCalendarInfo.content.xsyj">
                凶神宜忌:{{
                  oldYellowCalendarInfo.content.xsyj || ''
                }}
              </text>
            </view>
            <view class="hW_30"></view>
            <view class="timeListDetail_description">
              <text class="timeListDetail_description_text"
                    v-if="!!oldYellowCalendarInfo.content && !!oldYellowCalendarInfo.content.pzbj">
                彭祖百忌:{{
                  oldYellowCalendarInfo.content.pzbj || ''
                }}
              </text>
            </view>
            <view class="hW_40"></view>
          </template>
        </TimeListDetail>
      </view>
      <view style="position: relative" class="wh_726 flex flex-column align-center"
            v-for="(item,index) in oldYellowCalendarInfo.list" :key="index">
        <view class="hW_40"></view>
        <view class="oldYellowCalendar_allTitle flex align-center justify-center">
          <image class="oldYellowCalendar_allTitle_image"
                 :src="`${IMG_URL}/chineseSurname/jiapu_background_bg.png`"></image>
          <text>{{ item.name }}</text>
          <view class="theDurationOfTheDay_left flex align-center ml_10">
            <view class="theDurationOfTheDay_left_hour">
              {{ `${item.shijian.split('-')[0].split(':')[0]}:${item.shijian.split('-')[0].split(':')[1]}` }}
            </view>
            <view class="theDurationOfTheDay_left_tips ml_2 mr_2">至</view>
            <view class="theDurationOfTheDay_left_hour">
              {{ `${item.shijian.split('-')[1].split(':')[0]}:${item.shijian.split('-')[1].split(':')[1]}` }}
            </view>
          </view>
        </view>
        <view class="hW_40"></view>
        <time-list-detail>
          <template v-slot:content>
            <view class="hW_22"></view>
            <view class="timeListDetail_listLabel flex align-center">
              <view class="timeListDetail_listLabel_line"></view>
              <text class="timeListDetail_listLabel_text ml_12">{{ item.name }}宜忌</text>
            </view>
            <view class="hW_40"></view>
            <view class="timeListDetail_description">
              <text class="timeListDetail_description_text">
                吉凶: {{
                  item.jixiong
                }}
              </text>
            </view>
            <view class="hW_30"></view>
            <view class="timeListDetail_description">
              <text class="timeListDetail_description_text">
                时冲: {{
                  item.shichong
                }}
              </text>
            </view>
            <view class="hW_30"></view>
            <view class="timeListDetail_description">
              <text class="timeListDetail_description_text">
                时柱: {{
                  item.shizhu
                }}
              </text>
            </view>
            <view class="hW_30"></view>
            <view class="timeListDetail_goodOrIllLuck flex align-center justify-between">
              <time-list-detail width="312rpx">
                <template v-slot:content>
                  <view class="timeListDetail_goodOrIllLuck_list flex-sub flex flex-column align-center justify-center">
                    <view class="timeListDetail_goodOrIllLuck_list_top mt_15">
                      吉神
                    </view>
                    <view class="timeListDetail_goodOrIllLuck_list_bottom mt_10" allColumnCenter>
                      {{ item.jishen }}
                    </view>
                  </view>
                </template>
              </time-list-detail>
              <time-list-detail width="312rpx">
                <template v-slot:content>
                  <view
                    class="timeListDetail_goodOrIllLuck_list flex-sub flex flex-column align-center justify-center">
                    <view class="timeListDetail_goodOrIllLuck_list_top mt_15">
                      凶神
                    </view>
                    <view class="timeListDetail_goodOrIllLuck_list_bottom mt_10" allColumnCenter>
                      {{ item.xiongshen }}
                    </view>
                  </view>
                </template>
              </time-list-detail>
            </view>
            <view class="hW_40">
            </view>
          </template>
        </time-list-detail>
      </view>
      <view class="hW_50"></view>
    </view>
  </scroll-view>
</template>

<style scoped lang="scss">
  .oldYellowCalendar {
    width: 750rpx;

    .oldYellowCalendar_header {
      padding: 15rpx 0;
      width: 702rpx;
      border: 2rpx solid #BF8257;
      overflow: hidden;
      position: relative;

      .oldYellowCalendar_header_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #FF4206;
      }

      .oldYellowCalendar_header_left {
        position: absolute;
        left: -2rpx;
        top: -2rpx;
        width: 51rpx;
        height: 55rpx;
      }

      .oldYellowCalendar_header_right {
        position: absolute;
        right: -2rpx;
        bottom: -2rpx;
        width: 51rpx;
        height: 55rpx;
        transform: rotate(180deg);
      }
    }

    .oldYellowCalendar_allTitle {
      width: 291rpx;
      height: 86rpx;
      background-size: 291rpx 69rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 42rpx;
      color: #FF4206;
      position: absolute;
      top: 59rpx;
      background: #FFEDC7;
      z-index: 1;

      .oldYellowCalendar_allTitle_image {
        width: 291rpx;
        height: 86rpx;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
      }

      .theDurationOfTheDay_left {
        display: flex;
        flex-direction: row;
        font-size: 20rpx;
        font-weight: 400;
      }
    }

    .oldYellowCalendar_time {
      .oldYellowCalendar_time_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 174rpx;
        color: #FF4208;
      }
    }

    .timeListDetail_listLabel {
      width: 620rpx;

      .timeListDetail_listLabel_line {
        width: 12rpx;
        height: 37rpx;
        background: #FF4206;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
      }

      .timeListDetail_listLabel_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 36rpx;
        color: #91643D;
      }
    }

    .timeListDetail_content {
      width: 640rpx;
      margin-left: 20rpx;

      .timeListDetail_content_text {
        width: 640rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #91643D;
        line-height: 42rpx;
      }
    }

    .timeListDetail_line {
      width: 650rpx;
      height: 2rpx;
      background: rgba(132, 90, 0, 0.2);
    }

    .timeListDetail_description {
      width: 620rpx;
      margin-left: 20rpx;

      .timeListDetail_description_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #91643D;
      }
    }

    .timeListDetail_tabulation {
      width: 662rpx;

      .timeListDetail_tabulation_title {
        width: 167rpx;
        height: 71rpx;
        background: #FF4206;
        border-radius: 23rpx 23rpx 23rpx 23rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 37rpx;
        color: #FFFFFF;
      }

      .timeListDetail_tabulation_content {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #91643D;
      }
    }

    .theDurationOfTheDay {
      //.theDurationOfTheDay_left {
      //  .theDurationOfTheDay_left_hour {
      //    font-family: PingFang SC, PingFang SC;
      //    font-weight: 500;
      //    font-size: 28rpx;
      //    color: #91643D;
      //  }
      //
      //  .theDurationOfTheDay_left_tips {
      //    font-family: PingFang SC, PingFang SC;
      //    font-weight: 500;
      //    font-size: 28rpx;
      //    color: #91643D;
      //  }
      //}

      .theDurationOfTheDay_right {
        .timeListDetail_content {
          width: 100%;

          .timeListDetail_content_text {
            width: 100%;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 30rpx;
            color: #91643D;
            line-height: 42rpx;
          }
        }
      }
    }

    .timeListDetail_goodOrIllLuck {
      .timeListDetail_goodOrIllLuck_list {
        width: 312rpx;

        .timeListDetail_goodOrIllLuck_list_top {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 36rpx;
          color: #FF4206;
        }

        .timeListDetail_goodOrIllLuck_list_bottom {
          width: 280rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 30rpx;
          color: #91643D;
          text-align: center;
        }
      }
    }

    .timeListDetail_wuxingList {
      width: 662rpx;

      .timeListDetail_wuxingList_list {
        .timeListDetail_wuxingList_list_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 36rpx;
          color: #91643D;
        }
      }
    }
  }

  .description {
    position: absolute;
    top: 620rpx;
    right: 30rpx;

    .description_text {
      width: 114rpx;
      height: 96rpx;
      background: #FF4206;
      border-radius: 23rpx 23rpx 23rpx 23rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 51rpx;
      color: #FFFFFF;
    }

    .description_title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #91643D;
    }
  }
</style>